<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
  
	<div id="mescroll" class="mescroll">
		<div id="list">
		   		
		</div>
	</div>
    <script>
        var mescroll;
        $(function(){
        	mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
				down: {
					callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				},
				up: {
					callback: upCallback , //上拉加载的回调
					auto: false,
					isBounce: false //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
				}
			});
        })
        function downCallback() {
        	var data = {
        		firstId: _pid,
        		secondId: _id,
        		pageNum: 1,
        		pageSize: 10
        	}
        	console.log(1);
			$.ajax({
				url: '/wechat/posts',
				data: data,
				type: 'post',
				dataType: 'json',
				success: function(curPageData) {
					//联网成功的回调,隐藏下拉刷新的状态;
					mescroll.endSuccess(); //无参
					//设置数据
					var data = curPageData.data;
					setListData(data, false)//自行实现 TODO
				},
				error: function(data) {
					//联网失败的回调,隐藏下拉刷新的状态
					mescroll.endErr();
				}
			});
		}
        
        function upCallback(page) {
        	var data = {
           		firstId: _pid,
           		secondId: _id
           	}
			$.ajax({
				url: '/wechat/posts?pageNum=' + page.num + "&pageSize=" + page.size, //如何修改page.num从0开始 ?
				data: data,
				type: 'post',
				dataType: 'json',
				success: function(curPageData) {
					var data = curPageData.data;
					var totalSize = curPageData.total;
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					//必传参数(当前页的数据个数, 总数据量)
					mescroll.endBySize(data.length, totalSize);
					
					//设置列表数据
					setListData(data, true);//自行实现 TODO
				},
				error: function(e) {
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态
					mescroll.endErr();
				}
			});
		}
        function setListData(curPageData,isAppend){
        	var listDom=document.getElementById("list");
        	console.log(curPageData)
			for (var i = 0; i < curPageData.length; i++) {
				var pd=curPageData[i].post;
				var image = pd.postImg;
				if(image === null || image === 'null'){
					image = '/img/news01.jpg';
				}
				var str='<div class="avatar"><img onerror="/img/news01.jpg" src="' + image + '"/></div>';
				str+= '<div class="info"><h3>'+pd.postTitle+'</h3><p>'+pd.postContent+'</p></div>';
				
				var liDom=document.createElement("div");
				liDom.className= 'driver-item';
				liDom.innerHTML=str;
				
				if (isAppend) {
					listDom.appendChild(liDom);//加在列表的后面,上拉加载
				} else{
					listDom.insertBefore(liDom, listDom.firstChild);//加在列表的前面,下拉刷新
				}
			}
        }
    </script>
</body>
</html>